<div class="effeckt effeckt-demo-list-items group">

  <header>
    <h2>
      List Items
      <a href="list-items.html">#</a>
    </h2>
    <span class="source">
      Source:
      <a href="http://css-tricks.com/transitional-interfaces-coded/">
        CSS-Tricks
      </a>
    </span>
  </header>

  <div class="effeckt-list-wrap">
    <h4>Gap, Slide In/Slide Out</h4>
    <ul class="effeckt-list" data-effeckt-type="pop-in">
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
    <button class="add">Add</button>
    <button class="remove">Remove</button>
  </div>

  <div class="effeckt-list-wrap">
    <h4>Expand In/Shrink Out</h4>
    <ul class="effeckt-list" data-effeckt-type="expand-in">
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
    <button class="add">Add</button>
    <button class="remove">Remove</button>
  </div>

  <div class="effeckt-list-wrap">
    <h4>Wobble In/Wobble Out</h4>
    <ul class="effeckt-list" data-effeckt-type="wobble-in">
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
    <button class="add">Add</button>
    <button class="remove">Remove</button>
  </div>

  <div class="effeckt-list-wrap">
    <h4>Flip In/Flip Out</h4>
    <ul class="effeckt-list" data-effeckt-type="flip-in">
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
    <button class="add">Add</button>
    <button class="remove">Remove</button>
  </div>

  <div class="effeckt-list-wrap">
    <h4>Fall In/Fall Off</h4>
    <ul class="effeckt-list" data-effeckt-type="fall-in">
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
    <button class="add">Add</button>
    <button class="remove">Remove</button>
  </div>

  <div class="effeckt-list-wrap">
    <h4>From Above/To Above</h4>
    <ul class="effeckt-list" data-effeckt-type="from-above">
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
    <button class="add">Add</button>
    <button class="remove">Remove</button>
  </div>

  <div class="effeckt-list-wrap">
    <h4>Fall In/Wobble Out</h4>
    <ul class="effeckt-list" data-effeckt-type="wobble-out">
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
    <button class="add">Add</button>
    <button class="remove">Remove</button>
  </div>

  <div class="effeckt-list-wrap">
    <h4>Bouncy Slide In/Slide, Fall Off</h4>
    <ul class="effeckt-list" data-effeckt-type="bouncy-slide-in">
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
    <button class="add">Add</button>
    <button class="remove">Remove</button>
  </div>

</div>
